<template>
  <Drawer v-model:open="open" :title="$t('test.objectmigration.migrationconfiguration.index.title_qypz')" :footer="null" width="100%" @close="closeDrawer" destroyOnClose>
    <!-- 进度条组件 -->
    <a-flex class="stepsWapers">
    <a-steps class="stepsInner" :current="current">
        <a-step v-for="(step, index) in steps" :key="index" :title="step.title"
        :status="index < current ? 'finish': index === current ? 'process': 'wait'"
        >
        <template #description>
      <a style="color:#1677ff;cursor:pointer;" @click="showDetail(index)">{{ $t('test.objectmigration.migrationconfiguration.index.text_ckxq') }}</a>
    </template>
        </a-step>
      </a-steps>
    </a-flex>

      <!-- 任务组件 (动态组件)-->
      <component 
        v-if="steps[current] && steps[current].component" 
        :is="steps[current].component" 
        :ref="steps[current].component" 
        @next="next" 
        @prev="prev"
        @viewObject="handleViewObject"
      />
      <detailsMigration v-if="current === 5" />
      <!-- 下一步/上一步 -->
       <!-- <div class="flex justify-center">
        <a-button type="primary" @click="prev" style="margin-right: 10px;">{{ $t('test.objectmigration.migrationconfiguration.index.text_syb') }}</a-button>
        <a-button type="primary" @click="next">{{ $t('test.objectmigration.migrationconfiguration.index.text_xyb') }}</a-button>
       </div> -->
  </Drawer>
</template>

<script >

import { Drawer, Steps, Step } from 'ant-design-vue';
import MyLoading from '@/components/loading/loading.vue';
import MyError from '@/components/loading/error.vue';
import { defineAsyncComponent } from 'vue';

const transformPlan = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/migrationConfiguration/steps/transformPlan/transformPlan.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
const transformConfig = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/migrationConfiguration/steps/transformConfig/transformConfig.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
const transformGrammar = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/migrationConfiguration/steps/transformGrammar/transformGrammar.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
const objectCorrection = defineAsyncComponent({
  loader: () => import('@/views/objectMigration/migrationConfiguration/steps/objectCorrection/objectCorrection.vue'),
  loadingComponent: MyLoading,
  errorComponent: MyError,
  delay: 200,
  timeout: 10000
});
    const migrationVerification = defineAsyncComponent({
      loader: () => import('@/views/objectMigration/migrationConfiguration/steps/migrationVerification/migrationVerification.vue'),
      loadingComponent: MyLoading,
      errorComponent: MyError,
      delay: 200,
      timeout: 10000
    });
    const detailsMigration = defineAsyncComponent({
      loader: () => import('@/views/objectMigration/migrationConfiguration/DetailsMigration/index.vue'),
      loadingComponent: MyLoading,
      errorComponent: MyError,
      delay: 200,
      timeout: 10000
    });

  export default {
  components: {
    Drawer,
    Steps,
    Step,
    transformPlan,
    transformConfig,
    transformGrammar,
    objectCorrection,
    migrationVerification,
    detailsMigration,
    MyLoading,
    MyError,
  },
  data() {
    return {
      open: false,
      steps: [
        { title: '转换计划（对象过滤）', component: 'transformPlan' },
        { title: $t('test.objectmigration.migrationconfiguration.index.title_zhpz'), component: 'transformConfig' },
        { title: $t('test.objectmigration.migrationconfiguration.index.title_yfzh'), component: 'transformGrammar' },
        { title: $t('test.objectmigration.migrationconfiguration.index.title_dxxz'), component: 'objectCorrection' },
        { title: $t('test.objectmigration.migrationconfiguration.index.title_qyyz'), component: 'migrationVerification' },
      ],
      current: 5
    }
  },
  mounted() {
    console.log('mounted')
  },
  methods: {
    openDrawer() {
        console.log('zhanshi')
      this.open = true;

    },
    prev() {
      if (this.current > 0) {
        this.current--;
      }
    },
    async next() {
      if (this.current < this.steps.length - 1) {
        this.current++;
      }
    },
    closeDrawer() {
      this.open = false;
      this.current = 0;
      this.$store.commit('clearCache');
    },
    handleViewObject(current, row) {
      console.log(current, row, 'row')
      this.current = current;
    },
    showDetail(index) {
      this.current = index;
    }
  }
}   

</script>

<style scoped lang="scss">
.stepsWapers {
  display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0.3rem;
    padding: 3rem;
    width: 100%;
    height: 50px;
    margin: 0 auto 0.6rem;
    justify-content: center;
    position: sticky;
    top: -20px;
    z-index: 1000;
    box-shadow: 5px 5px 10px #bebebe, 5px 5px 10px #ffffff;
  .stepsInner{
    width: 80%;
  }
}
</style>